<template>
  <div class="box">{{ a }} : {{ b }}</div>
  <Row>
    <Button type="default" @click="add">操作</Button>
  </Row>
  <my-checkbox></my-checkbox>
</template>
<script lang="jsx">
import { h, render, resolveComponent } from 'vue'
import myCheckbox from './251030_1.vue'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      check: 1
    }
  },
  components: {
    myCheckbox
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    }
  },
  mounted() {
    const self = this
    const element = h(
      resolveComponent('Row'),
      {
        align: 'middle'
      },
      [
        h(
          resolveComponent('Checkbox'),
          {
            modelValue: self.check,
            onClick: () => {
              console.log(999)
            }
          },
          '内容2'
        ),
        h(
          resolveComponent('Button'),
          {
            type: 'name',
            color: 'red',
            style: {
              fontSize: '12px'
            },
            onClick() {
              self.add()
            }
          },
          '内容1'
        )
      ]
    )
    // const div = document.createElement('div')
    // render(element, div)
    // document.body.appendChild(div)
    // console.log(div)

    const div2 = document.createElement('div')
    const e2 = <my-checkbox></my-checkbox>
    render(e2, div2)
    console.log(div2)
    document.body.appendChild(div2)
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
